<!--已经上传的资源-->
<template>
  <el-form-item label="选中素材(独)" class="column-area">
    <div class="picture-resource">
      <Draggable
          class="list-group"
          @end="handleDragEnd"
          :animation="100"
          :list="optionsInfo[resourceType]"
      >
        <template v-for="(item,index) in optionsInfo[resourceType]">
          <div class="flex-box item-area">
            <div class="name flex-box-left" >
              <el-tooltip class="item" effect="dark" :content="(item.name)" placement="top-start">
                <el-button>{{ item.name }}</el-button>
              </el-tooltip>
              <div class="delay" v-if="delayState">
                <el-input
                    :min="5"
                    :step="1"
                    size="small"
                    type="number"
                    v-model="item.delay"
                    placeholder="请输入等待时间"
                    @blur="(e)=>handleChangeDelay(e,item)"
                />
                <span class="unit">(秒[s])</span>
              </div>
            </div>
            <p class="icon flex-box-right" :class="{'special': delayState}">
              <i class="el-icon-delete" @click.prevent="handleDelete(index,resourceType)"/>
              <i class="el-icon-thumb"/>
            </p>
          </div>
        </template>
      </Draggable>
    </div>
  </el-form-item>
</template>

<script>
import Draggable from "vuedraggable"
import constantDic from "@/utils/vue-i18n/lang/zh-CN";

export default {
  name: "carousel-editor",
  components: {Draggable},

  componentName: "background-editor",

  mixins: [],

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
    delayState: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    resourceType: {
      type: String,
      default: () => {
        return 'carouselInfo'
      }
    },
  },

  data() {
    return {
      optionsInfo: Object(),
      constantDic: constantDic,
    }
  },

  computed: {},

  methods: {
    // 拖拽结束
    handleDragEnd() {
    },

    // 删除资源
    handleDelete(index, type) {
      let {carouselInfo, video} = this.optionsInfo;
      switch (type) {
        case 'carouselInfo':
          carouselInfo.splice(index, 1);
          break
        case 'video':
          video.splice(index, 1);
          break
      }
    },

    // 轮播图设置延迟时间
    handleChangeDelay(event, item) {
      if (item && item.delay < 5) {
        Reflect.set(item,'delay',5)
      }
    },
  },

  watch: {
    optionModel: {
      handler: function (val) {
        let key = val.config;
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.column-area {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 10px;
  }

  :deep(.el-form-item__content) {
    width: 100%;
    margin-left: 0 !important;

    .el-radio-group {
      width: 100%;
      display: flex;
      flex-direction: column;

      .el-radio {
        margin-bottom: 10px;
      }
    }
  }

  //图片资源的设置
  .picture-resource {
    .item-area {
      min-width: inherit;
      min-height: inherit;

      .name {
        border: none;
        display: flex;
        flex-direction: column;
        min-width: calc(100% - 64px);
        overflow: hidden;
        margin-right: 10px;

        .el-button {
          border: none;
          background: transparent;
          @include singleEllipsis(100%);
          text-align: left;
          padding: 9px 0
        }
        .delay{
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          .unit{
            width: 60px;
            font-size: 12px;
            text-align: center;
            display: inline-block;
          }
        }
      }

      .icon {
        min-width: 48px;
        height: auto;
        border: none;
        font-size: 18px;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;

        i {
          cursor: pointer;

          &:first-child {
            padding-right: 6px;
          }

          &:hover {
            color: dodgerblue;
          }
        }
      }

      .special{
        display: flex;
        align-items: end;
        i {
          cursor: pointer;
          position: relative;
          top: -8px;
        }
      }
    }
  }
}
</style>
